<!--
 * @Author: byron
 * @Date: 2021-09-27 17:07:40
 * @LastEditTime: 2021-09-28 11:20:37
-->
<template>
    <div class="all-warp">
        <div class="top-card">
            <div class="img-warp">
                <img :src="img" alt="" />
            </div>
            <div class="right-con">
                <div class="tag-warp">
                    <span>精品歌单</span>
                </div>
                <p class="name">{{ name }}</p>
                <p class="desc">
                    {{ desc }}
                </p>
            </div>
        </div>
        <div
            class="background"
            :style="{ backgroundImage: `url(${img})` }"
        ></div>
        <div class="background-mask"></div>
    </div>
</template>

<script>
export default {
    components: {},
    props: ['desc', 'id', 'name', 'img'],
    data() {
        return {}
    },
    watch: {},
    computed: {},
    methods: {},
    created() {},
    mounted() {},
}
</script>
<style lang="scss" scoped>
.all-warp {
    position: relative;
    overflow: hidden;
    border-radius: 4px;

    .top-card {
        position: relative;
        z-index: 3;
        display: flex;
        padding: 10px;
        .img-warp {
            position: relative;
            width: 140px;
            height: 140px;
            margin-right: 10px;
            flex-shrink: 0;

            img {
                width: 100%;
                height: 100%;
            }
        }
        .right-con {
            display: flex;
            flex: 1;
            height: 140px;
            flex-direction: column;
            justify-content: center;

            .tag-warp {
                align-self: flex-start;
                color: #c6673c;
                border: 1px solid #c6673c;
                margin-bottom: 16px;
                padding: 4px 16px;
                text-align: center;
                border-radius: 4px;
            }
            .name {
                margin-bottom: 8px;

                color: var(--body-bgcolor);
            }
            .desc {
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                font-size: 14px;
                color: rgba(255, 255, 255, 0.5);
            }
        }
    }
    .background {
        position: absolute;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        z-index: 1;
        filter: blur(16px);
    }
    .background-mask {
        position: absolute;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.5);
    }
}
</style>
